<template>
  <li :class="{'item-right': right, 'nav-item': !isText, 'nav-text': isText, 'clickable': useClick}" @click="whenClick">
    <slot></slot>
  </li>
  
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "NavItem"
})
</script>
<script setup lang="ts">
import { toRefs } from "vue"
const props = withDefaults(
  defineProps<{
    right?: boolean,
    isText?: boolean,
    useClick?: boolean,
    whenClick?: () => void
  }>(),
  {
    right: false,
    isText: false,
    useClick: false,
    whenClick: () => {}
  }
)
const { right, isText, whenClick } = toRefs(props)
</script>

<style scoped lang="less">
@import "../vars";
.nav-item {
  list-style: none;
  padding: 1em 1.5em;
  font-size: 1em;
  background-color: @gray-700;
  border-radius: 1em;
  color: #fff;
  cursor: pointer;
  &:not(.item-right) {
    & + & {
      margin-left: 1em;
    }
  }
  &.item-right {
    margin-left: auto;
    & + & {
      margin-left: 1em;
    }
  }
  &:hover {
    background-color: @gray-600;
  }
}
.nav-text {
  list-style: none;
  font-size: 1.25em;
  color: #fff;
  padding: 0.625em 0;
  margin: 0 0.5em;
}
</style>